﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="BarWithLine.aspx.cs" Inherits="WS.EKA.Web.UI.Demo.BarWithLine" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript" src="/Scripts/Plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script type="text/javascript" src="/Scripts/Plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script type="text/javascript" src="/Scripts/Plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
    <script type="text/javascript" src="/Scripts/Plugins/jqplot.categoryAxisRenderer.min.js"></script>
    <script type="text/javascript" src="/Scripts/Plugins/jqplot.barRenderer.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var barData = [['bar1', 3224], ['bar2', 324], ['bar3', 3224], ['bar4', 324], ['bar5', 324], ['bar6', 324]];
            var lineData = [['line1', 150], ['line2', 99], ['line3', 180], ['line4', 90], ['line5', 90], ['line6', 190]];
            var plot = $.jqplot('chartBarWithLine', [barData, lineData], {
                series: [{
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: {
                        barWidth: 50
                    }
                }, {
                    xaxis: 'x2axis',
                    yaxis: 'y2axis'
                }],
                grid: {
                    background: '#111'
                },
                seriesDefaults: {

                },
                axesDefaults: {
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    tickOptions: {
                        fontSize: '10pt'
                        //textColor: '#fff'
                    }
                },
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer
                        
                    },
                    x2axis: {
                        renderer: $.jqplot.CategoryAxisRenderer
                    },
                    yaxis: {
                        autoscale: true
                    },
                    y2axis: {
                        autoscale: true
                    }
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="chartBarWithLine" style="width: 900px; margin-top: 20px; margin-left: 30px;">
    </div>
</asp:Content>
